<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>基于WEB的校园新闻发布管理系统</title>
</head>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/jquery.datetimepicker.css"/>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<body>
<div class="header">
    <div id="box">
        <ul class="list">
            <li class="curren"><img src="images/s1.jpg" height="500" width="100%"></li>
            <li ><img src="images/s2.jpg" height="500" width="100%"></li>
            <li ><img src="images/s3.jpg" height="500" width="100%"></li>
            <li ><img src="images/s4.jpg" height="500" width="100%"></li>
        </ul>
        <ul class="count">
            <li class="current"></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>

        </ul>
    </div>

</div>
<div class="nav">
<ul class="nav_list">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻分类</a></li>
    <li><a href="#">人物投票</a></li>
    <li><a href="#">后台管理</a></li>
    <li><a href="#">网友评论</a></li>
    <li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="main">
    <div class="left_main">
        <div class="left_main_1">
            <div class="announce">
                <p>本站公告</p>
                <div class="zhanshi">
                   <p>欢迎光临</p>
                    <p>傻傻校园网</p>
                </div>
            </div>
            <div class="search">
                <p>站内搜索</p>
                <div class="zhanshi">
                    <p>关键字</p>
                    <input type="text"/><br>
                    <button>搜索</button>
                </div>
            </div>
        </div>
        <div class="left_main_2">
            <input type="text" id="datetimepicker3"/>
            <div class="search">
                <p>用户登录</p>
                <div class="zhanshi">
                    <label for="tel">学号：</label>
                    <input type="text"/><br>
                    <label for="passward">   密码：</label>
                 <input type="text"/>
                    <button>登录</button>
                </div>
            </div>
        </div>
    </div>
    <div class="right_main">
        <div class="top_main">
            <div class="news">
                <p>最新新闻 <a href="#">MORE</a></p>
                <ul class="list-china1">
                    <li>
                        <div class="pic1">
                            <img src="images/15-0701.jpg" alt=""/>
                        </div>
                        <div class="pic-content1">
                            <h2><a href="#">2015年7月1日雒树刚部长到我中心调研</a></h2>
                            <p>2015年7月1日，文化部部长雒树刚到我中心进行调研，要求中心围绕</p>
                            <div class="detail"><a href="CenterDynamic.html">了解详情</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="pic1">
                            <img src="images/15-1216.jpg" alt=""/>
                        </div>
                        <div class="pic-content1">
                            <h2><a href="#">中共六大会址修复工程举行结构封顶仪式</a></h2>
                            <p>2015年12月16日，在距莫斯科市修复工程现场，由莫斯科中国文化...</p>
                            <div class="detail"><a href="#">了解详情</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="pic1">
                            <img src="images/16-0620.jpg" alt=""/>
                        </div>
                        <div class="pic-content1">
                            <h2><a href="#">六大会址工程竣工验收</a></h2>
                            <p>2016年6月20日，中华人民共和国文化部财务司和俄罗斯联邦莫斯科市文物...</p>
                            <div class="detail"><a href="#">了解详情</a></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="video">
                <video width="342px"  controls autoplay> <!--高度可随着宽度的改变自动按比例改变-->
                    <source src="video/uart.mp4" type="video/mp4" />  <!--为了支持苹果设备（测试支持：chrome49.0/firefox45.0/IE10）-->
                    <source src="video/uart.ogv" type="video/ogg" />  <!--为了支持火狐浏览器（测试支持：chrome49.0/firefox45.0）-->
                    <source src="video/uart.webm" type="video/webm" />  <!--为了支持谷歌浏览器（测试支持：chrome49.0/firefox45.0）-->
                    <object width="800" height="450" type="application/x-shockwave-flash" data="video/uart.swf" style="background:url('bg.jpg');">  <!--为了支持IE8（测试支持：chrome49.0/IE8/10）。高度不会随着宽度的改变自动按比例改变，需要宽度高度都进行设置，视频大小由两者之间的较小值决定，在设置宽高时，宽度与video相同，高度通过检测video高度的值来设置-->
                        <param name="movie" value="video/uart.swf" />
                        <param name="flashvars" value="autostart=true&amp;file=video.flv" />
                    </object>
                </video>
                <div class="news_later">
                    <p>焦点新闻</p>
                    <ul class="news_late">
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                        <li><a href="#" class="late1">&nbsp;<b>&gt;&gt;</b>&nbsp;食堂涨价</a>
                            <a href="#" class="late2">2015-07-05</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="bottom_main">
            <div class="bt_1">
                <p>最新评论</p>
                <ul class="comment">
                    <li>
                        <a href="#"><img src="images/11.png" alt=""/></a>
                        <div class="comm_1">
                            <b>果果</b>
                            <span>2011-05-02&nbsp;21:20:00</span>
                        </div>
                        <div class="comm_2">
                            <p>fcsrsdfsdgv</p>
                        </div>
                    </li>
                    <li>
                        <a href="#"><img src="images/11.png" alt=""/></a>
                        <div class="comm_1">
                            <b>果果</b>
                            <span>2011-05-02&nbsp;21:20:00</span>
                        </div>
                        <div class="comm_2">
                            <p>fcsrsdfsdgv</p>
                        </div>
                    </li>
                    <li>
                        <a href="#"><img src="images/11.png" alt=""/></a>
                        <div class="comm_1">
                            <b>果果</b>
                            <span>2011-05-02&nbsp;21:20:00</span>
                        </div>
                        <div class="comm_2">
                            <p>fcsrsdfsdgv</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bt_2">
                <p>投票专区</p>
                <div class="skillbar clearfix " data-percent="30%">
                    <div class="skillbar-title" style="background: #d35400;"><span>校花大赛</span></div>
                    <div class="skillbar-bar" style="background: #e67e22;"></div>
                    <div class="skill-bar-percent">30%</div>
                </div> <!-- End Skill Bar -->
                <div class="skillbar clearfix " data-percent="35%">

                    <div class="skillbar-title" style="background: #2980b9;"><span>会议</span></div>

                    <div class="skillbar-bar" style="background: #3498db;"></div>

                    <div class="skill-bar-percent">35%</div>

                </div> <!-- End Skill Bar -->
                <div class="skillbar clearfix " data-percent="50%">
                    <div class="skillbar-title" style="background: #2c3e50;"><span>运动</span></div>
                    <div class="skillbar-bar" style="background: #2c3e50;"></div>
                    <div class="skill-bar-percent">50%</div>
                </div> <!-- End Skill Bar -->
                <div class="skillbar clearfix " data-percent="40%">

                    <div class="skillbar-title" style="background: #46465e;"><span>竞演</span></div>

                    <div class="skillbar-bar" style="background: #5a68a5;"></div>

                    <div class="skill-bar-percent">40%</div>

                </div> <!-- End Skill Bar -->
                <div class="skillbar clearfix " data-percent="75%">
                    <div class="skillbar-title" style="background: #333333;"><span>辩论赛</span></div>
                    <div class="skillbar-bar" style="background: #525252;"></div>
                    <div class="skill-bar-percent">75%</div>
                </div> <!-- End Skill Bar -->
                <div class="skillbar clearfix " data-percent="100%">
                    <div class="skillbar-title" style="background: #27ae60;"><span>体育</span></div>
                    <div class="skillbar-bar" style="background: #2ecc71;"></div>
                    <div class="skill-bar-percent">100%</div>
                </div> <!-- End Skill Bar -->
                <div class="skillbar clearfix " data-percent="70%">
                    <div class="skillbar-title" style="background: #124e8c;"><span>教务</span></div>
                    <div class="skillbar-bar" style="background: #4288d0;"></div>
                    <div class="skill-bar-percent">70%</div>
                </div> <!-- End Skill Bar -->
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <ul class="footer_1">
        <li><a href="http://www.pku.edu.cn/"><img src="images/foot1.jpg" alt=""/></a></li>
        <li><a href="http://www.tsinghua.edu.cn/publish/th/index.html"><img src="images/foot2.jpg" alt=""/></a></li>
        <li><a href="http://www.fudan.edu.cn/"><img src="images/foot3.jpg" alt=""/></a></li>
        <li><a href="http://www.zxxk.com"><img src="images/foot4.jpg" alt=""/></a></li>
        <li><a href="http://www.dearedu.com/"><img src="images/foot5.jpg" alt=""/></a></li>
    </ul>
    <div class="foot">
        <div class="foot1"><img src="images/foot8.png" alt=""/></div>
        <div class="foot2">
        <p>兰州理工大学-LanZhou University Of Technology-奋进求是</p>
            <p>校本部：甘肃省兰州市七里河区兰工坪路287号　(86-0931)-2973715</p>
            <p>西校区：甘肃省兰州市七里河区彭家坪路36号　(86-0931)-2973715</p>
            <p>陇ICP备15002798号</p>
        </div>
    </div>
</div>
<div class="footer1"><span>版权所有：个人校园新闻发布管理系统</span></div>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jQuery.spider.poll-min.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script>

    $('#datetimepicker10').datetimepicker({
        step:5,
        inline:true
    });
    $('#datetimepicker_mask').datetimepicker({
        mask:'9999/19/39 29:59'
    });
    $('#datetimepicker').datetimepicker();
    $('#datetimepicker').datetimepicker({value:'2015/04/15 05:03',step:10});
    $('#datetimepicker1').datetimepicker({
        datepicker:false,
        format:'H:i',
        step:5
    });
    $('#datetimepicker2').datetimepicker({
        yearOffset:222,
        lang:'ch',
        timepicker:false,
        format:'d/m/Y',
        formatDate:'Y/m/d',
        minDate:'-1970/01/02', // yesterday is minimum date
        maxDate:'+1970/01/02' // and tommorow is maximum date calendar
    });
    $('#datetimepicker3').datetimepicker({
        inline:true



    });
    $('#datetimepicker4').datetimepicker();
    $('#open').click(function(){
        $('#datetimepicker4').datetimepicker('show');
    });
    $('#close').click(function(){
        $('#datetimepicker4').datetimepicker('hide');
    });
    $('#reset').click(function(){
        $('#datetimepicker4').datetimepicker('reset');
    });
    $('#datetimepicker5').datetimepicker({
        datepicker:false,
        allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00']
    });
    $('#datetimepicker6').datetimepicker();
    $('#destroy').click(function(){
        if( $('#datetimepicker6').data('xdsoft_datetimepicker') ){
            $('#datetimepicker6').datetimepicker('destroy');
            this.value = 'create';
        }else{
            $('#datetimepicker6').datetimepicker();
            this.value = 'destroy';
        }
    });
    var logic = function( currentDateTime ){
        if( currentDateTime.getDay()==6 ){
            this.setOptions({
                minTime:'11:00'
            });
        }else
            this.setOptions({
                minTime:'8:00'
            });
    };
    $('#datetimepicker7').datetimepicker({
        onChangeDateTime:logic,
        onShow:logic
    });
    $('#datetimepicker8').datetimepicker({
        onGenerate:function( ct ){
            $(this).find('.xdsoft_date')
                    .toggleClass('xdsoft_disabled');
        },
        minDate:'-1970/01/2',
        maxDate:'+1970/01/2',
        timepicker:false
    });
    $('#datetimepicker9').datetimepicker({
        onGenerate:function( ct ){
            $(this).find('.xdsoft_date.xdsoft_weekend')
                    .addClass('xdsoft_disabled');
        },
        weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
        timepicker:false
    });

    var box=document.getElementById('box');
    var uls=document.getElementsByTagName('ul');
    var imgs=uls[0].getElementsByTagName('li');
    var btn=uls[1].getElementsByTagName('li');
    var i=index=0; //中间量，统一声明；
    var play=null;
    //console.log(box,uls,imgs,btn);//获取正确  //图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面
    function show(a){                                            //方法定义的是当传入一个下标时，按钮和图片做出对的反应

        for(i=0;i<btn.length;i++ ){

            btn[i].className='current0';                 //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
            btn[a].className='current';
        }



        for(i=0;i<imgs.length;i++){
            //把图片的效果设置和按钮相同
            imgs[i].style.opacity='.4';
            imgs[a].style.opacity='1';
        }

    }


    //切换按钮功能，响应对应图片
    for(i=0;i<btn.length;i++){
        btn[i].index=i;               //不知道你有没有发现，循环里的方法去调用循环里的变量体i，
        //会出现调到的不是i的变动值的问题。所以我先在循环外保存住
        btn[i].onmouseover=function(){
            show(this.index);
            clearInterval(play);                                             //这就是最后那句话追加的功能
        }
    }


    //自动轮播方法
    function autoPlay(){
        play=setInterval(function(){                 //这个paly是为了保存定时器的，变量必须在全局声明
            //  不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
            index++;
            index>=imgs.length&&(index=0);                   //可能有优先级问题，所以用了括号，没时间测试了。
            show(index);   },3000)
    }
    autoPlay();                           //马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，
    //使用autoPlay所以只能这样调用了
    //div的鼠标移入移出事件
    box.onmouseover=function(){
        clearInterval(play);  };
    box.onmouseout=function(){
        autoPlay();
    };                   //按钮下标也要加上相同的鼠标事件，不然图片停止了，
    // 定时器没停，会突然闪到很大的数字上。
    //貌似我可以直接追加到之前定义事件中。
    jQuery(document).ready(function(){
        jQuery('.skillbar').each(function(){
            jQuery(this).find('.skillbar-bar').animate({
                width:jQuery(this).attr('data-percent')
            },1000);
        });
    });
</script>
</body>
</html>